<template>
	<view class="song_sheet">
		<song-top :title="title" :description="description" :image="image"></song-top>
		<play></play>
		<song-list :songList="songList"></song-list>
	</view>
</template>
 
<script>
	import SongTop from "./SongTop"
	import Play from "./Play"
	import SongList from "@/components/content/songList/SongList.vue"
	
	import {getSongSheet} from '@/network/axios/getSongSheet'
	
	export default {
		name: '',
		data(){
			return {
				id: "",
				sheetInfo: {},
				title: "",    //标题
				description: "",  //介绍
				image: "", //图片地址
				
				songList: [] //歌曲列表
			}
		},
		methods:{
			
		},
		onLoad(option) {
			//拿到id数据
			this.id = option.id
			this.id = this.id * 1
			//请求歌单数据
			getSongSheet(this.id).then((res) => {
				this.sheetInfo = res.data
				let info = this.sheetInfo.playlist
				//头部数据
				this.title = info.name
				this.description = info.description
				this.image = info.coverImgUrl
				
				//列表数据
				this.songList = info.tracks
			})
		},
		components: { SongTop, Play, SongList }
	}
</script>
 
<style lang="less" scoped>
</style>
